<template>
    <div>
        <div>
            <el-input class="searchInput" 
                    clearable
					@clear="keywordClear"
                    v-model="keyword"
                    placeholder="请输入公司关键字查询"
                    @keydown.enter.native="doSearch"
                    prefix-icon="el-icon-search">
            </el-input>
            <el-button icon="el-icon-search" type="primary" @click="doSearch">搜索</el-button>
        </div>
        <div style="margin-top: 10px">
                <el-table   
                        :data="record"
                        stripe
                        border
                        style="width: 88%">
                    <el-table-column
                            prop="studentId" label="学号" width="130">
                    </el-table-column>
                    <el-table-column
                            prop="sname" label="姓名" width="75">
                    </el-table-column>
                    <el-table-column
                            prop="gender" label="性别" width="55">
                    </el-table-column>
                    <el-table-column
                            prop="mname" label="专业" width="150">
                    </el-table-column>
                    <el-table-column
                            prop="level" label="学级" width="60">
                    </el-table-column>
                    <el-table-column
                            prop="cname" label="班级" width="100">
                    </el-table-column>
					<el-table-column
					        prop="bname" label="实习公司" width="250">
					</el-table-column>
                    <el-table-column 
                            prop="pname" label="实习岗位" width="110">
                    </el-table-column>
					<el-table-column
					        prop="createTime" label="实习日期" width="110">
					</el-table-column>
					<el-table-column
					        prop="score" label="评分">
					</el-table-column>
					
                </el-table>
            </div>
			<div style="width: 88%; display: flex; justify-content: flex-end;">
			    <el-pagination
					background
					@current-change="currentChange"
					@size-change="sizeChange"
					:current-page="current"
			        :page-size="size"
			        :page-sizes="[10,20,40]"
			        layout="sizes, prev, pager, next, jumper, ->, total, slot"
			        :total="total">
			    </el-pagination>
			</div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
				record:[],
                keyword:'',
				current: 1,
				size: 10,
				total: 0,
            }
        },
		mounted() {
			this.initRecord();
		},
        methods:{
			initRecord(){
				let url = '/base/record/?current=' + this.current + '&size=' + this.size + '&keyword=' + this.keyword;
				this.getRequest(url).then(resp => {
					if(resp){
						this.record = resp.data;
						this.total = resp.total;
					}
				})
			},
			keywordClear(){
				this.current = 1;
				this.initRecord();
			},
            doSearch(){
				this.current = 1;
				this.initRecord();
            },
			currentChange(val){
				this.current = val;
				this.initRecord();
			},
			sizeChange(value){
				this.size = value;
				this.initRecord();
			},
        }
    }
</script>

<style scoped>
    .searchInput{
        width: 300px;
        margin-right: 8px;
    }
</style>